<template>
  <div>
    <Row>
    <Card>
      <Row>
        <Col>
        <Card>
          <DatePicker type="year" placeholder="选择年" style="width: 200px"></DatePicker>
          <Button type="primary" icon="ios-search" >搜索</Button>
          <div id="lineChart"></div>
        </Card>
        </Col>
      </Row>
      <br>
      <Row>
        <Col span="11" >
        <Card>
          <DatePicker type="daterange" :options="options2" placement="bottom-start" placeholder="选择日期范围" style="width: 200px"></DatePicker>
          <Button type="primary" icon="ios-search" >搜索</Button>
          <div id="visitChart"></div>
        </Card>
        </Col>
        <Col span="11" offset="2">
        <Card>
          <DatePicker type="year" placeholder="选择年" style="width: 200px"></DatePicker>
          <Button type="primary" icon="ios-search" >搜索</Button>
          <div id="typeChart"></div>
        </Card>
        </Col>
      </Row>
    </Card>
    </Row>

  </div>
</template>
<style scoped>
  #lineChart,#visitChart,#typeChart{
    width: 100%;
    height: 300px;
    margin: 10px auto;
  }
</style>
<script type="text/ecmascript-6">
  //import api from '@/fetch/api';
  import echarts from 'echarts';
  import 'echarts/chart/line';
  import 'echarts/chart/pie';
  import 'echarts/component/toolbox';
  import 'echarts/component/tooltip';
  import 'echarts/component/legend';
  import 'echarts/component/title';


  export default {

    mounted() {
      this.initLine(),
        this.initVisit(),
        this.initType()
    },

    data () {
      return {
        options2: {
          shortcuts: [
            {
              text: '最近一周',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                return [start, end];
              }
            },
            {
              text: '最近一个月',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                return [start, end];
              }
            },
            {
              text: '最近三个月',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                return [start, end];
              }
            }
          ]
        },
        model1: '',
        typeOption:{},
        lineOption:{},
        visitOption:{},
        colors:['#5793f3', '#d14a61', '#675bba']
      }
    },
    methods: {
      initLine(){
        let $this = this;
        $this.lineOption = {
          title: {
            text: '用户增长趋势',
            left: 'center',
            top: 10,
            textStyle: {
              color: '#2B2B2B'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: ['一月','二月','三月','四月','五月','六月']
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} w'
            }
          },
          series: [

            {
              name:'用户量',
              type:'line',
              data:[2.9, 2.3,3.1,4,3,4],
              markPoint: {
                data: [
                  {name: '年最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'},
                  [{
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  }, {
                    symbol: 'circle',
                    label: {
                      normal: {
                        position: 'start',
                        formatter: '最大值'
                      }
                    },
                    type: 'max',
                    name: '最高点'
                  }]
                ]
              }
            }
          ]
        };
        var echartsOne = document.getElementById('lineChart');
        var myChart = echarts.init(echartsOne);

        myChart.setOption($this.lineOption);
      },
      initVisit(){
        let $this = this;
        $this.visitOption = {
          backgroundColor: '#2c343c',

          title: {
            text: '模块访问量',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },

          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },

          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series : [
            {
              name:'访问量',
              type:'pie',
              radius : '55%',
              center: ['50%', '50%'],
              data:[
                {value:335, name:'一张图'},
                {value:310, name:'配送管理'},
                {value:274, name:'应急指挥'},
                {value:235, name:'车辆服务'},
                {value:400, name:'统计分析'}
              ].sort(function (a, b) { return a.value - b.value; }),
              roseType: 'radius',
              label: {
                normal: {
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  color: '#c23531',
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        };
        var echartsOne = document.getElementById('visitChart');
        var myChart = echarts.init(echartsOne);

        myChart.setOption($this.visitOption);
      },
      initType(){
        let $this = this;
        $this.typeOption = {
          backgroundColor: '#2c343c',

          title: {
            text: '模块访问量',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },

          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },

          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series : [
            {
              name:'访问量',
              type:'pie',
              radius : '55%',
              center: ['50%', '50%'],
              data:[
                {value:335, name:'一张图'},
                {value:310, name:'配送管理'},
                {value:274, name:'应急指挥'},
                {value:235, name:'车辆服务'},
                {value:400, name:'统计分析'}
              ].sort(function (a, b) { return a.value - b.value; }),
              roseType: 'radius',
              label: {
                normal: {
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  color: '#c23531',
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        };
        var echartsOne = document.getElementById('typeChart');
        var myChart = echarts.init(echartsOne);

        myChart.setOption($this.typeOption);
      },
    }
  }
</script>
